<template>
  <div class="agreement-container">
    <div class="backBg">
      <el-card class="box-card agreement-form" shadow="always">
        <div class="bet-list">
          <div slot="header" class="clearfix">
            <div class="userxy">用户协议</div>
          </div>
        </div>

        <div class="text-content">
          <p> ● 01. 为避免出现争议，请您务必在下注之后查看「下注状况」。 </p>
          <p> ● 02. 任何投诉必须在开奖之前，本系统不接受任何开奖之后的投诉。 </p>
          <p> ● 03. 公布赔率时出现的任何打字错误或非故意人为失误，所有（相关）注单一律不算。 </p>
          <p> ● 04. 公布之所有赔率为浮动赔率，下注时请确认当前赔率及金额，下注确认后一律不能修改。 </p>
          <p> ● 05. 开奖后接受的投注，一律视为投机漏洞，[本局注单一律不返还本金及盈利]，敬请会员遵守游戏规则。 </p>
          <p> ● 06. 若本后台发现客户以不正当的手法投注或投注注单不正常，后台将有权「取消」相应之注单，客户不得有任何异议。 </p>
          <p> ● 07. 如因软件或线路问题导致交易内容或其他与账号设定不符合的情形，请在开奖前立即与本后台联络反映问题，否则本后台将以资料库中的数据为准。 </p>
          <p> ● 08. 倘若发生遭黑客入侵破坏行为或不可抗拒之灾害致网站故障或资料损坏、数据丢失等情况，后台将以资料库数据为依据。 </p>
          <p> ● 09. 各级管理人员及客户必须对本系统各项功能进行了解及熟悉，任何违反正常使用的操作，后台概不负责。 </p>
          <p> ● 10. 请认真了解各款彩票游戏规则。 </p>
          <p style="color:red"> ● 11. 如果会员信用额度超额或者为负数引起的争议，一律以公司处理为准。 </p>
          <p> ● 12. 客户有责任确保自己的账户及密码保密，如果因客户的账户、密码简单，或因泄露导致被盗用，造成的损失由客户本人承担；同时应立即通知本公司，并更改其个人详细资料。 </p>
          <p> ● 13. 若官方福彩中心开奖错误导致本系统采集数据同时出错情况下当期错误的所有注单以福彩中心官方网站更改后的数据为标准重新结算！在此特别声明，客户不得有任何异议。</p>
          <p> 以上协议解释权归本系统所有。</p>
        </div>
        <div class="bet-btnGroup">
          <button class="agreeBtn" @click="cancel">不同意</button>
          <button class="agreeBtn" @click="ok">同意</button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { get as AuthGet } from '@/utils/auth'

  export default {
    name: 'agreement',
    computed: {
      ...mapGetters(['memberIsMobile']),
    },
    data() {
      return {
        agreementShow: true,
      }
    },
    mounted() {},
    methods: {
      ok() {
        if (AuthGet('isMobile') == 'true') {
          this.$router.push({ path: '/mobile' })
        } else {
          this.$store.dispatch('MemberGames', {})
          this.$router.push({ path: '/member' })
        }
        this.$store.commit('agree', true)
      },
      cancel() {
        this.$store.dispatch('FedLogOut').then(() => {
          localStorage.removeItem('memberAlreadlogIn')
          sessionStorage.removeItem('memberAlreadlogIn')
          sessionStorage.removeItem('token')
          location.reload() // 为了重新实例化vue-router对象 避免bug
        })
      },
    },
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  $bg: white;
  $dark_gray: #889aa4;
  $light_gray: #eee;
  $light_blue: #b3d8ff;
  $dark_blue: #ecf5ff;

  .agreement-container {
    // position: fixed;
    min-height: 100vh;
    width: 100%;
    background-color: $bg;
    background-size: 100% 100%;
    input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0px 1000px white inset !important;
      -webkit-text-fill-color: black !important;
    }
    .backBg{
      padding-top: 5%;
    }
    .el-card{
      border: 0;
    }
    .el-card__body{
      padding: 0;
    }
    .bet-btnGroup{
      overflow: hidden;
      width:100%;
      display: flex;
      justify-content: center;
      padding: 20px 20px;
      border-top: 1px solid #d3d1d1;
      margin-bottom: 30px;

    }

    .agreement-form {
      background-color: #fff;
      position: relative;
      width: 770px;
      margin: 0 auto;
      .text-content {
        font-size: 13px;
        margin-top: 51px;
        padding: 20px;
        p {
          padding: 0;
          margin-bottom: 5px;
        }
      }
    }
  }
  .userxy{
    width: 770px;
    text-align: center;
    font-size: 20px;
    line-height: 51px;
    font-weight: bold;
    color: #fff;
  }
  .clearfix{
    position:absolute;
    top: 0;
    left: 0;
   width: 100%;
    height: 51px;
  }
  .agreeBtn{
    display: block;
    width: 66px;
    height: 33px;
    line-height: 27px;
    font-size: 14px;
    color: white;
    font-weight: bold;
    text-align: center;
    margin: 0 0 0 30px;
    float: left;
    border: 0;
  }
</style>
